<%--
  Created by IntelliJ IDEA.
  User: chenqi
  Date: 2021/12/9
  Time: 21:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生信息主界面</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui/jquery-ui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.serializejson.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/js/jquery-ui/jquery-ui.min.css">
    <style>
        .headTb{
            font-size: 30px;
            text-align: center;
            margin: 50px 10px 10px;
        }
        #users, #classes{
            text-align: center;
            border: solid 1px #777;
            border-collapse: collapse;
        }
        .tbl-list{
            margin: auto;
        }
        .tbl-list th {
            width:120px;
            border: solid 1px #777;
            height: 30px;
        }
        .tbl-list td {
            width:120px;
            text-align: center;
            border: solid 1px #777;
            height: 30px;
        }
        .addbtn{
            text-align: center;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <!-- 用户信息展示 -->
    <div class="headTb">学生信息管理<input type="button" value="添加学生信息" class="addbtn" onclick="showAdd()"></div></div>
    <table id="users" class="tbl-list">
        <thead>
           <tr>
               <th>学号</th>
               <th>姓名</th>
               <th>性别</th>
               <th>出生日期</th>
               <th>邮箱</th>
               <th>班级</th>
               <th>操作</th>
           </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <!-- 添加用户 -->
    <div id="add-user-modal" title="添加用户" style="display:none;">
        <form id="add-user-form">
            <table>
                <tr><td>学号</td><td><input type="text" name="id" ></td></tr>
                <tr><td>姓名</td><td><input type="text" name="name"></td></tr>
                <tr><td>性别</td><td><input type="text" name="sex"></td></tr>
                <tr><td>出生日期</td><td><input type="text" name="birthday"></td></tr>
                <tr><td>邮箱</td><td><input type="text" name="email"></td></tr>
                <tr><td>班级</td><td><input type="text" name="cid"></td></tr>
                <tr><td>备注</td><td><input type="text" name="remark"></td></tr>
            </table>
        </form>
    </div>


    <!-- 更新用户框 -->
    <div id="update-user-modal" title="更新用户" style="display:none;">
        <form id="update-user-form">
            <table>
                <tr><td>学号</td><td><input type="text" name="id" readonly="readonly"></td></tr>
                <tr><td>姓名</td><td><input type="text" name="name"></td></tr>
                <tr><td>性别</td><td><input type="text" name="sex"></td></tr>
                <tr><td>出生日期</td><td><input type="text" name="birthday"></td></tr>
                <tr><td>邮箱</td><td><input type="text" name="email"></td></tr>
                <tr><td>班级</td><td><input type="text" name="cid"></td></tr>
                <tr><td>备注</td><td><input type="text" name="remark"></td></tr>
            </table>
      </form>
    </div>

    <!--删除用户框 -->
    <div id="delete-user-modal" title="删除用户" style="display:none;">
        <p>确定删除吗？</p>
    </div>


    <div class="headTb">班级信息管理<input type="button" value="添加班级" class="addbtn" onclick="showClassAdd()"></div></div>

    <table id="classes" class="tbl-list">
        <thead>
        <tr>
            <th>班级编号</th>
            <th>年级</th>
            <th>班主任</th>
            <th>口号</th>
            <th>人数</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <!-- 添加班级 -->
    <div id="add-class-modal" title="添加班级" style="display:none;">
        <form id="add-class-form">
            <table>
                <tr><td>班级编号</td><td><input type="text" name="cid" ></td></tr>
                <tr><td>年级</td><td><input type="text" name="grade"></td></tr>
                <tr><td>班主任</td><td><input type="text" name="headMaster"></td></tr>
                <tr><td>口号</td><td><input type="text" name="slogan"></td></tr>
                <tr><td>人数</td><td><input type="text" name="num"></td></tr>
            </table>
        </form>
    </div>

    <!-- 更新班级框 -->
    <div id="update-class-modal" title="更新班级" style="display:none;">
        <form id="update-class-form">
            <table>
                <tr><td>班级编号</td><td><input type="text" name="cid" readonly="readonly"></td></tr>
                <tr><td>年级</td><td><input type="text" name="grade"></td></tr>
                <tr><td>班主任</td><td><input type="text" name="headMaster"></td></tr>
                <tr><td>口号</td><td><input type="text" name="slogan"></td></tr>
                <tr><td>人数</td><td><input type="text" name="num"></td></tr>
            </table>
        </form>
    </div>

    <!--删除班级框 -->
    <div id="delete-class-modal" title="删除班级" style="display:none;">
        <p>确定删除吗？</p>
    </div>
<script>
    $(function() {
        listAllUser();
        listAllCalves();
    });

    //查询所有学生信息
    function listAllUser() {
         $.ajax({
               type: "GET",
               url: "student",
               data:{"action":"listAll"},
               dataType: "json",
               success: function(data) {
                    $("#users tbody").empty();  // 每次载入前先清空显示区域，防止数据重复显示
                    var users = data.list;
                    for (var i in users) {
                        var user = users[i];
                        var userStr = JSON.stringify(user);
                        $("#users tbody").append('<tr><td>' + user.id + '</td>'
                         + '<td>' + user.name + '</td>'
                         + '<td>' + user.sex + '</td>'
                         + '<td>' + user.birthday + '</td>'
                         + '<td>' + user.email + '</td>'
                         + '<td>' + user.cid + '</td>'
                         + '<td><button onclick=\'showUpdate(' + userStr + ')\'>更新</button>&nbsp;'
                         + '<button onclick="deleteUser(' + user.id + ')">删除</button></td></tr>');
                     }
              },
              error: function() {
                console.log("ajax error");
              }
        });
    }


    //查询所有班级信息
    function listAllCalves() {
        $.ajax({
            type: "GET",
            url: "classes",
            data:{"action":"listAll"},
            dataType: "json",
            success: function(data) {
                $("#classes tbody").empty();  // 每次载入前先清空显示区域，防止数据重复显示
                var classList = data.list;
                for (var i in classList) {
                    var cla = classList[i];
                    var claStr = JSON.stringify(cla);
                    $("#classes tbody").append('<tr><td>' + cla.cid + '</td>'
                        + '<td>' + cla.grade + '</td>'
                        + '<td>' + cla.headMaster + '</td>'
                        + '<td>' + cla.slogan + '</td>'
                        + '<td>' + cla.num + '</td>'
                        + '<td><button onclick=\'showClassUpdate(' + claStr + ')\'>更新</button>&nbsp;'
                        + '<button onclick="deleteClass(' + cla.cid + ')">删除</button></td></tr>');
                }
            },
            error: function() {
                console.log("ajax error");
            }
        });
    }

    //添加学生
    function showAdd(){
         $("#add-user-form")[0].reset();  // 每次载入前先清空表单，防止显示之前的信息
         $("#add-user-modal").dialog({
               resizable: false,
               modal: true,
               buttons: {
                   "提交": function() {
                       addUser();
                   },
                   "取消": function() {
                       $(this).dialog("close");
                   },
               },
         });
    }

    function addUser(){
         // 获取序列化表单信息
         var user = $("#add-user-form").serializeJSON();
         var userStr = JSON.stringify(user);

         $.ajax({
               type: "POST",
               url: "student?action=add",
               data: userStr,
               contentType: 'application/json;charset=utf-8',
               dataType: "json",
               success: function(data) {
                    if (data.isSuccess) {
                        $("#add-user-modal").dialog("close");
                        alert('添加成功！');
                        listAllUser();
                    } else {
                        $("#add-user-modal").dialog("close");
                        alert('添加失败！');
                        listAllUser();
                    }
               },
               error: function() {
                   console.log("ajax error");
               }
         });
    }

    //修改学生信息
    function showUpdate(user) {
        $("#update-user-form")[0].reset();  // 每次载入前先清空表单，防止显示之前的信息
        // 表单赋值
        $("#update-user-form input[name='id']").val(user.id);
        $("#update-user-form input[name='name']").val(user.name);
        $("#update-user-form input[name='sex']").val(user.sex);
        $("#update-user-form input[name='birthday']").val(user.birthday);
        $("#update-user-form input[name='email']").val(user.email);
        $("#update-user-form input[name='remark']").val(user.remark);
        $("#update-user-form input[name='cid']").val(user.cid);
        $("#update-user-modal").dialog({
            resizable: false,
            modal: true,
            buttons: {
                "提交": function() {
                    updateStudent();
                },
                "取消": function() {
                    $(this).dialog("close");
                },
            },
        });
    }

    // 更新用户
    function updateStudent() {
        // 获取序列化表单信息
        var user = $("#update-user-form").serializeJSON();
        var userStr = JSON.stringify(user);
        $.ajax({
               type: "POST",
               url: "student?action=update",
               data: userStr,
               contentType: 'application/json;charset=utf-8',
               dataType: "json",
               success: function(data) {
                     if (data.isSuccess) {
                           $("#update-user-modal").dialog("close");
                           alert('更新成功！');
                           listAllUser();
                     } else {
                       $("#update-user-modal").dialog("close");
                       alert('更新失败！');
                       listAllUser();
                     }
               },
               error: function() {
                   console.log("ajax error");
               },
        });
    }

    // 删除用户
    function deleteUser(id) {
        // 将id封装为JSON格式数据
        var data = {};
        data.id = id;
        var dataStr = JSON.stringify(data);
        // 显示删除用户模态框
        $("#delete-user-modal").dialog({
            resizable: false,
            modal: true,
            buttons: {
                "确认": function() {
                    $.ajax({
                        type: "POST",
                        url: "student?action=delete",
                        contentType: 'application/json;charset=utf-8',
                        data: dataStr,
                        dataType: "json",
                            success: function(data) {
                                   if (data.isSuccess) {
                                       $("#delete-user-modal").dialog("close");
                                       alert('删除成功！');
                                       listAllUser();
                                   } else {
                                       $("#delete-user-modal").dialog("close");
                                       alert('删除失败！');
                                       listAllUser();
                                   }
                             },
                             error: function() {
                                 console.log("ajax error");
                             },
                    });
                },
                "取消": function() {
                    $(this).dialog("close");
                },
            },
        });
    }



    //添加班级
    function showClassAdd(){
        $("#add-class-form")[0].reset();  // 每次载入前先清空表单，防止显示之前的信息
        $("#add-class-modal").dialog({
            resizable: false,
            modal: true,
            buttons: {
                "提交": function() {
                    addClass();
                },
                "取消": function() {
                    $(this).dialog("close");
                },
            },
        });
    }

    function addClass(){
        // 获取序列化表单信息
        var cla = $("#add-class-form").serializeJSON();
        var claStr = JSON.stringify(cla);

        $.ajax({
            type: "POST",
            url: "classes?action=add",
            data: claStr,
            contentType: 'application/json;charset=utf-8',
            dataType: "json",
            success: function(data) {
                if (data.isSuccess) {
                    $("#add-class-modal").dialog("close");
                    alert('添加成功！');
                    listAllCalves();
                } else {
                    $("#add-class-modal").dialog("close");
                    alert('添加失败！');
                    listAllCalves();
                }
            },
            error: function() {
                console.log("ajax error");
            }
        });
    }

    function showClassUpdate(cla) {
        $("#update-class-form")[0].reset();  // 每次载入前先清空表单，防止显示之前的信息
        // 表单赋值
        $("#update-class-form input[name='cid']").val(cla.cid);
        $("#update-class-form input[name='grade']").val(cla.grade);
        $("#update-class-form input[name='headMaster']").val(cla.headMaster);
        $("#update-class-form input[name='slogan']").val(cla.slogan);
        $("#update-class-form input[name='num']").val(cla.num);
        $("#update-class-modal").dialog({
            resizable: false,
            modal: true,
            buttons: {
                "提交": function() {
                    updateClass();
                },
                "取消": function() {
                    $(this).dialog("close");
                },
            },
        });
    }

    function updateClass() {
        // 获取序列化表单信息
        var cla = $("#update-class-form").serializeJSON();
        var claStr = JSON.stringify(cla);
        console.log(claStr);
        $.ajax({
            type: "POST",
            url: "classes?action=update",
            data: claStr,
            contentType: 'application/json;charset=utf-8',
            dataType: "json",
            success: function(data) {
                if (data.isSuccess) {
                    $("#update-class-modal").dialog("close");
                    alert('更新成功！');
                    listAllCalves();
                } else {
                    $("#update-class-modal").dialog("close");
                    alert('更新失败！');
                    listAllCalves();
                }
            },
            error: function() {
                console.log("ajax error");
            },
        });
    }

    function deleteClass(cid) {
        // 将id封装为JSON格式数据
        var data = {};
        data.cid = cid;
        var dataStr = JSON.stringify(data);
        // 显示删除用户模态框
        $("#delete-class-modal").dialog({
            resizable: false,
            modal: true,
            buttons: {
                "确认": function() {
                    $.ajax({
                        type: "POST",
                        url: "classes?action=delete",
                        contentType: 'application/json;charset=utf-8',
                        data: dataStr,
                        dataType: "json",
                        success: function(data) {
                            if (data.isSuccess) {
                                $("#delete-class-modal").dialog("close");
                                alert('删除成功！');
                                listAllCalves();
                            } else {
                                $("#delete-class-modal").dialog("close");
                                alert('删除失败！');
                                listAllCalves();
                            }
                        },
                        error: function() {
                            console.log("ajax error");
                        },
                    });
                },
                "取消": function() {
                    $(this).dialog("close");
                },
            },
        });
    }

</script>

</body>
</html>
